<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <!-- <el-input v-model="listQuery.code" clearable class="filter-item" style="width: 160px;" placeholder="请输入品牌编号" />
      <el-input v-model="listQuery.herbName" clearable class="filter-item" style="width: 160px;" placeholder="请输入品牌名称" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button v-permission="['POST /admin/herb/create']" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
      <el-button v-permission="['POST /admin/herb/batchDelete']" type="danger" size="mini" icon="el-icon-delete" class="filter-item" @click="batchDelete()">删除</el-button>
      <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload(true)">导出</el-button>
      <el-button v-permission="['POST /admin/herb/batchPublish']" :loading="downloadNullLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload(false)">导入模板下载</el-button>
      <el-upload
        class="filter-item"
        action="" 
        :http-request="uploadSectionFile" 
        :show-file-list="false"
        style="margin-left: 10px;"
      > -->
        <!-- <el-button
        v-permission="['POST /admin/herb/batchPublish']"
          class="in-item"
          type="primary"
          icon="el-icon-upload"
        >
        导入
        </el-button>
      </el-upload> -->
      <!-- <el-button class="filter-item" type="primary"  @click="handleFilter" >更新车辆品牌 </el-button> -->

    </div>

    <!-- 查询结果 -->
    <!-- <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row @selection-change="handleSelectionChange" @sort-change='sorting'> -->

      <!-- <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="table-expand">
            <el-form-item label="创建时间">
              <span>{{ props.row.addTime }}</span>
            </el-form-item>
            <el-form-item label="更新时间">
              <span>{{ props.row.updateTime }}</span>
            </el-form-item>

          </el-form>
        </template>
      </el-table-column> -->
      <!-- <el-table-column
        type="selection"
        width="50"
        :selectable="selectable"
        align="center"
        fixed="left"
        :resizable="false"
      /> -->

      <!-- <el-table-column align="center" label="药材ID" prop="id" /> -->

      <!-- <el-table-column align="center" label="品牌编号" prop="code" sortable='custom' />

      <el-table-column align="center" min-width="100" label="品牌名称" prop="herbName" />

      <el-table-column align="center" min-width="100" label="厂家名称" prop="genericName" />

      <el-table-column align="center" min-width="100" label="型号" prop="specifications" />

      <el-table-column align="center" min-width="100" label="搜索首字母" prop="measurementUnit" />

      <el-table-column align="center" min-width="100" label="厂家指导价" prop="coefficient" />

      <el-table-column align="center" min-width="100" label="年款" prop="describe" />

      <el-table-column align="center" property="iconUrl" label="品牌logo">
        <template v-if="scope.row.herbImage" slot-scope="scope">
          <el-image :src="thumbnail(scope.row.herbImage)" :preview-src-list="toPreview(scope.row, scope.row.herbImage)" style="width: 40px; height: 40px" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['POST /admin/herb/update']" type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button v-permission="['POST /admin/herb/delete']" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table> -->

    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->

    <!-- 添加或修改对话框 -->
    <!-- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="品牌编号" prop="code">
          <el-input v-model="dataForm.code" maxlength="50" />
        </el-form-item>
        <el-form-item label="品牌名称" prop="herbName">
          <el-input v-model="dataForm.herbName" maxlength="50" />
        </el-form-item>
        <el-form-item label="厂家名称" prop="genericName">
          <el-input v-model="dataForm.genericName" maxlength="50" />
        </el-form-item>
        <el-form-item label="型号" prop="specifications">
          <el-input v-model="dataForm.specifications" maxlength="10" />
        </el-form-item>
        <el-form-item label="搜索首字母" prop="measurementUnit">
          <el-input v-model="dataForm.measurementUnit" maxlength="10" />
        </el-form-item>
        <el-form-item label="厂家指导价" prop="coefficient">
          <el-input v-model="dataForm.coefficient" maxlength="10" />
        </el-form-item>
        <el-form-item label="年款" prop="describe">
          <el-input v-model="dataForm.describe" maxlength="100" />
        </el-form-item>
        <el-form-item label="品牌logo">
          <el-upload
            :headers="headers"
            :action="uploadPath"
            :show-file-list="false"
            :on-success="uploadPicUrl"
            class="avatar-uploader"
            accept=".jpg,.jpeg,.png,.gif"
            style="float: left;"
          >
            <img v-show="dataForm.herbImage" :src="dataForm.herbImage" class="avatar">
            <i v-show="!dataForm.herbImage" class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
             <el-button v-show="dataForm.herbImage"  @click="dataForm.herbImage = ''" style="margin-left: 10px;float: inherit;" type="danger">删除照片</el-button> -->
            <!-- <el-button v-show="dataForm.herbImage"  @click="delectHerbImage()" style="margin-left: 10px;float: inherit;" type="danger" icon="el-icon-delete" circle></el-button>
        </el-form-item> --> 
        <!--<el-form-item label="药材视频">
          <el-upload
            :headers="headers"
            :action="uploadPath"
            :show-file-list="false"
            :on-success="uploadVideoUrl"
            class="avatar-uploader"
            accept=".wmv,.asf,.asx,.Real,.Player,.rm,.rmvb,.mp4,.3gp,.mov,.m4v,.avi,.dat,.mkv,.flv,.vob"
            style="float: left;"
          >
            <video v-show="dataForm.herbVideo" ref="videoPlayer" controls :src="dataForm.herbVideo" controlslist="nodownload"
                 style="width: 100%; height: 100%; object-fit: fill">
            </video>
            <i v-show="!dataForm.herbVideo" class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
          <el-button v-show="dataForm.herbVideo"  @click="delectHerbVideo()" style="margin-left: 10px;float: inherit;" type="danger" icon="el-icon-delete" circle></el-button>
        </el-form-item>-->
      <!-- </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确定</el-button>
        <el-button v-else type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog> -->
    <el-tree :data="dataForm" :props="defaultProps" class="filter-tree" ></el-tree>


  </div>
</template>

<style>
.file {    
    vertical-align: middle;
    margin-bottom: 10px;
    margin-left: 10px;
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 145px;
  height: 145px;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar{
    width: 145px;
    height: 145px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 145px;
  height: 145px;
  line-height: 120px;
  text-align: center;
}
.avatar-uploader{
  line-height: 0px;
  width: 145px;
  height: 145px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
  .table-expand {
    font-size: 0;
    padding-left: 60px;
  }
  .table-expand label {
    width: 100px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
  }
  .gallery {
    width: 80px;
    margin-right: 10px;
  }
  .herb-detail-box img {
    width: 100%;
  }
</style>

<script>
import { batchPublish ,batchDelete, editHerb, publishHerb, listHerb, deleteHerb } from '@/api/herb'
import BackToTop from '@/components/BackToTop'
import { uploadPath } from '@/api/storage'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { thumbnail, toPreview } from '@/utils/index'
import { getToken } from '@/utils/auth'

export default {
  name: 'HerbList',
  components: { BackToTop, Pagination },
  data() {
    return {

      defaultProps: {
          children: 'children',
          label: 'name'
        },

      uploadPath,
      thumbnail,
      toPreview,
      selectList: [],
      total: 0,
      list:null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        selectAll: false,
        name: undefined,
        sort: 'id',
        order: 'desc'
      },
      herbDetail: '',
      detailDialogVisible: false,
      downloadLoading: false,
      downloadNullLoading: false,
      dataForm:[],
      dialogStatus: '',
      dialogFormVisible: false,
    }
  },
    computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.getList()
    console.log(this.dataForm)
  },
  mounted() {
    // 绑定enter事件
    this.enterKeyup();
  },
  methods: {
    enterKey(event) {
      if(event.key=='Enter'){
        this.handleFilter()
      }
    },
    
    enterKeyupDestroyed() {
        document.removeEventListener("keyup", this.enterKey);
    },
    enterKeyup() {
        document.addEventListener("keyup", this.enterKey);
    },
    getList() {
      this.listLoading = true
      this.listQuery.selectAll = false
      listHerb().then(response => {
        this.dataForm = response.data.data
        console.log(response.data)
        this.listLoading = false
        console.log(this.dataForm)
      }).catch(() => {
        console.log("catch")
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    
   
    uploadPicUrl: function(response) {
      this.$set(this.dataForm,'herbImage',response.data.url)
    },
    uploadVideoUrl: function(response) {
      this.$set(this.dataForm,'herbVideo',response.data.url)
    },
    selectable(row) {
      if (row.bytstatus === 4) {
        return false
      } else {
        return true
      }
    },
    
    
  }
}
</script>
